import React from 'react';
import kls from 'classnames';
import EchartsWrap from '@/components/widgets/EchartsWrap';

let xData = ['2020-06', '2020-07', '2020-08', '2020-09'];
let yData = [
  [12, 42, 64, 26],
  [28, 23, 32, 21],
];

let options = {
  color: ['#2FB0FF', '#2FB0FF'],
  legend: {
    data: ['完成拆迁', '新签户'],
    textStyle: {
      color: 'rgba(255, 255, 255, 0.45)',
      fontWeight: 600,
    },
    left: '5%',
    icon: 'circle',
    itemWidth: 5,
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
      label: {
        show: false,
      },
    },
  },
  grid: {
    left: '5%',
    right: '5%',
    bottom: '0%',
    top: '18%',
    containLabel: true,
    z: 22,
  },

  xAxis: {
    type: 'category',
    gridIndex: 0,
    data: xData,
    axisTick: {
      show: false,
      alignWithLabel: false,
    },
    axisLine: {
      show: true,
      lineStyle: {
        type: 'solid',
        color: 'rgba(255,255,255,0.2)',
      },
    },
    axisLabel: {
      show: true,
      color: 'rgba(255,255,255,0.5)',
      fontSize: 12,
    },
  },

  yAxis: [
    {
      type: 'value',
      gridIndex: 0,
      axisTick: {
        show: false,
        alignWithLabel: false,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255,255,255,0.1)',
        },
      },
      min: 0,
      axisLabel: {
        color: 'rgba(255,255,255,0.5)',
        formatter: '{value}',
        fontSize: 12,
      },
      splitLine: {
        show: true, //网格线显示
        lineStyle: {
          type: 'solid',
          color: 'rgba(255,255,255,0.1)',
        },
      },
      name: '事件',
    },
  ],
  series: [
    {
      name: '完成拆迁',
      type: 'bar',
      itemStyle: {
        color: '#2FFF9F',
      },
      data: yData[0],
      barWidth: 6,
      barGap: 1,
    },
    {
      name: '新签户',
      type: 'bar',
      itemStyle: {
        color: '#2FB0FF',
      },
      data: yData[1],
      barWidth: 6,
    },
  ],
};

const SubPanel8 = () => {
  return <EchartsWrap option={options} style={{ width: '100%', height: 240 }} />;
};

export default SubPanel8;
